import { Sinppet } from "@/types/snippet";

export default function EnglishSnippet({ snippets }: { snippets: Sinppet[] }) {
  return (
    <div className="flex md:grid grid-cols-5 space-x-3 space-y-3 p-6">
      {snippets.map((i) => {
        return (
          <div
            key={i.id}
            className="transition hover:scale-103 hover:rotate-2 shadow-md hover:shadow-xl bg-amber-100/80 flex flex-col space-y-3 p-6"
          >
            <h1 className="font-bold">{i.title}</h1>
            <div className="">{i.content}</div>
            <div className="flex space-x-1 text-xs">
              {i.tags.data
                ? i.tags.data.map((t: string) => {
                    return (
                      <div key={t} className="bg-amber-200/80 p-3 rounded-2xl">
                        {t}
                      </div>
                    );
                  })
                : null}
            </div>
          </div>
        );
      })}
    </div>
  );
}
